<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>仿小米logo</title>
		<style type="text/css">
			.wrap {
				margin: 0 auto;
				padding: 50px;
				width: 18.75rem;
				height: 200px;
				border: 1px solid #000000;
				background-color: #CCCCCC;
			}
			.logo {
				overflow: hidden;  /* 超出部分隐藏 */
				display: block;  /* 转换成块级元素 */
				width: 55px;  /*宽度高度靠内容撑开*/
				height: 55px;
				background-color: #FF6700;
				position: relative;  /*相对定位   他还是一个基准*/ 
			}
			.logo::before {
				position: absolute;  /* 绝对定位 */
				content: '';   /*必须有这个content*/
				margin-left: -59px;
				display: block;  /* 转换成块级元素 */
				width: 55px;  /*宽度高度靠内容撑开*/
				height: 55px;
				background-color: #FF6700;
				background-image: url(../../img/mi-home.png);
				transition: all .3s;  /* 过渡效果 */
			}
			.logo::after {
				position: absolute;  /* 绝对定位 */
				content: '';   /*必须有这个content*/
				/* margin-left: 59px; */
				margin-left: 3px;
				display: block;  /* 转换成块级元素 */
				width: 55px;  /*宽度高度靠内容撑开*/
				height: 55px;
				background-color: #FF6700;
				background-image: url(../../img/mi-logo.png);
				transition: all .5s;  /* 过渡效果 */
			}
			.logo:hover::before{
				margin-left: 2px;
			}
			.logo:hover::after {
				margin-left: 62px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<a class="logo" href="http://www.mi.com"></a>
		</div>
	</body>
</html>
